<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,body{
          background-color:rgba(255, 255, 255, 0);
        }
        .aui-grid [class*=aui-col-xs-]:active {
            background-color: transparent!important;
        }
        #actionSheet-mask2{
          width: 100%;
          position: fixed;
          left: 0px;
          top: 0px;
          z-index: 10;
          background: rgba(0, 0, 0, 0.3);
        }
        .actionSheet{
          width: 100%;
          position: fixed;;
          bottom: 0;
          left: 0;
          z-index: 15;
          background: #fff;
          border-radius: 15px 15px 0 0;
        }
        .actionSheet h1{
          text-align: center;
          font-size: 18px;
          line-height: 18px;
          margin: 15px 0 21px 0;
        }
        .aui-grid{
          margin: 30px 0;
        }
        .aui-grid .aui-col-xs-6 {
           padding:0;
        }
        .opreatBtn1,
        .opreatBtn2{
          width: 149px;
          height: 39px;
          margin: 0 auto;
        }
        .opreatBtn1{
          background:url(../../image/main/payBtn1@2x.png) no-repeat center;
          background-size:100% 100%;
        }
        .opreatBtn2{
          background:url(../../image/main/payBtn2@2x.png) no-repeat center;
          background-size:100% 100%;
        }
        .rechargeInput{
          width: 326px!important;
          height: 51px!important;
          border-radius: 5px!important;
          box-shadow: 0px 0px 8px #dadada!important;
          margin: 0 auto!important;
          text-align: center;
              font-size: 17px!important;
        }
        .actionSheet input::-webkit-input-placeholder{
          font-size: 18px;
        }
        .slides-enter-active, .slides-leave-active {
          transition: opacity .3s;
        }
        .slides-enter, .slides-leave-to  {
          opacity: 0;
        }
        .slidesLeft-enter-active {
          transition: all .2s ease;
        }
        .slidesLeft-leave-active {
          transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slidesLeft-enter, .slidesLeft-leave-to {
          transform: translateY(300px);
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
            .rechargeInput {
                width: 217px!important;
                height: 34px!important;
             }
             .actionSheet h1{
                margin: 15px 0 14px 0;
             }
             .actionSheet h1 ,
             .rechargeInput,
             .actionSheet input::-webkit-input-placeholder{
                 font-size: 12px;
             }
             .opreatBtn1, .opreatBtn2 {
                  width: 100px;
                  height: 26px;
              }
              .aui-grid {
                  margin: 20px 0;
              }
        }
    </style>
</head>

<body>
    <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}" >
       <transition name="slides">
         <div class="actionSheet-mask" id="actionSheet-mask2" v-bind:style="{height:wHeight}" v-if="showMask1" @click.self="hidUserSection()">
          </div>
       </transition>
       <transition name="slidesLeft">
          <section class="rechargeSection actionSheet"  v-if="showMask2">
               <h1>充值</h1>
               <h2><input type="number" ref="rechargeValue" class="rechargeInput" placeholder="请输入充值金额"></h2>
               <section class="aui-grid" >
                      <div class="aui-row">
                          <div class="aui-col-xs-6 ">
                              <div class="aui-grid-label">
                                <p class="opreatBtn1"></p>
                              </div>
                          </div>
                          <div class="aui-col-xs-6">
                              <div class="aui-grid-label">
                                <p class="opreatBtn2"></p>
                              </div>
                          </div>
                      </div>
               </section>
          </section>
       </transition>
   </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
       api.parseTapmode();
      //  api.setStatusBarStyle({
      //     style: 'black'
      // });
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#moreSection',
        data: {
            wHeight: '',
            balance : "7,500.00",
            disBalance : "1452.00",
            showMask1 : true,
            showMask2 : false,
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh) + 'px';
            },
            gotoComment : function(){
              bf_common_view.bf_win.openWin('userComment', '../main/');
            },
            hidUserSection : function(){
               this.showMask2 = false;
               setTimeout(function(){
                   api.closeFrame({
                     animation: {
                        type:"none",                //动画类型（详见动画类型常量）
                        duration:200
                     }
                   });
               },300)
            },
        },
        mounted: function () {
             this.showMask2 = !this.showMask2;
        }
    });
    var mainPageMethod = {

    };
    app.init();
</script>

</html>
